<template>
  <div class="my-setting">
    <div class="theme">
      <div class="flex items-center">
        <span>背景：</span>
        <v3-color-picker v-model:value="store.theme.bgColor"></v3-color-picker>
      </div>
      <div class="flex items-center">
        <span>二级背景：</span>
        <v3-color-picker v-model:value="store.theme.secondaryBgColor"></v3-color-picker>
      </div>
      <div class="flex items-center">
        <span>hover背景：</span>
        <v3-color-picker v-model:value="store.theme.HoverBgColor"></v3-color-picker>
      </div>
      <div class="flex items-center">
        <span>字体：</span>
        <v3-color-picker v-model:value="store.theme.textColor"></v3-color-picker>
      </div>
      <div class="flex items-center">
        <span>hover字体：</span>
        <v3-color-picker v-model:value="store.theme.hoverTextColor"></v3-color-picker>
      </div>
      <div class="flex items-center">
        <span>标题字体：</span>
        <v3-color-picker v-model:value="store.theme.titleTextColor"></v3-color-picker>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";


const store = useStore()


</script>

<style lang="scss" scoped>

</style>
